<template>
	<div class="goodslist">
		<div class="goods-item" @click="goDetail(89)">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526742971188&di=471a56392ba71d80170dcf04b1212388&imgtype=0&src=http%3A%2F%2Fimg.go007.com%2F2017%2F03%2F09%2Fe494ccf79b037001_0.jpg"alt="">
			<h3>华为Mate10 震撼来袭！128G 全网通</h3>
			<div class="info">
				<div class="price">
					<span class="now">￥3888</span>
					<span class="old">￥2998</span>
				</div>
				<div class="sell">
					<span>热卖中</span>
					<span>剩60件</span>
				</div>
			</div>
		</div>

			<div class="goods-item">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526743318973&di=131271abf8b2163fc6ce2d5e98f955cc&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fd62a6059252dd42a6c6f3797083b5bb5c9eab8a3.jpg" alt="">
			<h3>iphone 99 震撼来袭！128G 全网通,不要998,只要5888</h3>
			<div class="info">
				<div class="price">
					<span class="now">￥5888</span>
					<span class="old">￥998</span>
				</div>
				<div class="sell">
					<span>热卖中</span>
					<span>剩60件</span>
				</div>
			</div>
		</div>

		<div class="goods-item">
			<img src="../../images/xiaomi.png"  alt="">
			<h3>小米 宇宙无敌概念机9 plus</h3>
			<div class="info">
				<div class="price">
					<span class="now">￥2888</span>
					<span class="old">￥2998</span>
				</div>
				<div class="sell">
					<span>热卖中</span>
					<span>剩60件</span>
				</div>
			</div>
		</div>

		

		
		

		
		
	</div>
</template>


<script>
	export default{
		data(){
			return{

			}
		},
		methods:{
			goDetail(id){
			// 1. 最简单的
			// this.$router.push("/home/goodsinfo/"+id);
			// 2. 传递对象
			// this.$router.push({path:"/home/goodsinfo/"+id})
			// 3.传递路由名字
			this.$router.push({name:'goodsinfo',params:{id}})
			
			}
		}
		
	}
</script>


<style lang="scss" scoped>
	.goodslist{
		padding:7px;
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
		background:#fff;

		.goods-item{
			display:flex;
			flex-direction:column;
			justify-content:space-between;
			width:49%;
			min-height:293px;
			box-shadow:0 2px 8px #333;
			margin-top:8px;
			padding:5px;
			img{
				width:100%;
			}
			h3{
				font-size:14px;
				font-weight:600;
			}
			.info{
				background-color:#ddd;
				color:#333;
				.now{
					color:red;
					font-size:14px;
				}
				.old{
					font-size:12px;
					text-decoration:line-through;
					margin-left:8px;
				}
				.sell{
					display:flex;
					justify-content:space-between;
					font-size:12px;
				}
			}
		}
	}
</style>